export default (function() {
  function t() {
    this.name = "field";
  }
  return t.prototype.createTarget = function(t) {
      var e = void 0;
      if (t && (e = t.getFields()), e) {
        this.isSelect = !0;
        // 生成支持模糊搜索的自定义下拉结构
        var optionsHtml = e.map(function(t) {
          return `<li data-value="${t.field}">${t.text}</li>`;
        }).join('');
        var n = `<div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">${'字段名'}</div>
        <div class="hiprint-option-item-field">
          <div class="hiprint-custom-select">
            <input type="text" class="filter-input auto-submit" placeholder="${'搜索字段...'}">
            <input type="hidden" class="selected-value">
            <ul class="options-list">${optionsHtml}</ul>
          </div>
        </div>
      </div>`;
        this.target = $(n);
        // 初始化事件监听
        var self = this;
        this.target.find('.filter-input').on('input', function() {
          var query = $(this).val().toLowerCase();
          self.target.find('.options-list li').each(function() {
            var text = $(this).text().toLowerCase();
            $(this).toggle(text.includes(query));
          });
        });

        this.target.find('.options-list').on('click', 'li', function() {
          var value = $(this).data('value');
          var text = $(this).text();
          self.target.find('.selected-value').val(value);
          self.target.find('.filter-input').val(text);
          self.target.find('.options-list').hide();
        });

        this.target.find('.filter-input').on('focus', function() {
          self.target.find('.options-list').show();
        });

        $(document).on('click', function(e) {
          if (!self.target.find('.hiprint-custom-select').has(e.target).length) {
            self.target.find('.options-list').hide();
          }
        });

      } else {
        this.isSelect = !1;
        this.target = $(`<div class="hiprint-option-item hiprint-option-item-row">
        <div class="hiprint-option-item-label">${'字段名'}</div>
        <div class="hiprint-option-item-field">
          <input type="text" placeholder="${'请输入字段名'}" class="auto-submit">
        </div>
      </div>`);
      }

      return this.target;
    },

    t.prototype.getValue = function() {
      return this.isSelect ?
        this.target.find('.selected-value').val() || void 0 :
        this.target.find('input').val() || void 0;
    },

    t.prototype.setValue = function(t) {
      if (this.isSelect) {
        var $options = this.target.find('.options-list li');
        var $selected = $options.filter('[data-value="' + t + '"]');
        if ($selected.length) {
          this.target.find('.selected-value').val(t);
          this.target.find('.filter-input').val($selected.text());
        } else {
          // 动态添加新选项
          var newOption = $('<li>').attr('data-value', t).text(t);
          this.target.find('.options-list').append(newOption);
          this.target.find('.selected-value').val(t);
          this.target.find('.filter-input').val(t);
        }
      } else {
        this.target.find('input').val(t);
      }
    },

    t.prototype.destroy = function() {
      this.target.remove();
    },

    t;
}())
// 添加CSS样式
var style = document.createElement('style');
style.textContent = `
.hiprint-custom-select {
  position: relative;
  width: 100%;
}

.hiprint-custom-select .options-list {
  display: none;
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  max-height: 150px;
  overflow-y: auto;
  width: 100%;
  z-index: 1000;
  margin: 2px 0 0;
  padding: 0;
  list-style: none;
}

.hiprint-custom-select .options-list li {
  padding: 5px 10px;
  cursor: pointer;
}

.hiprint-custom-select .options-list li:hover {
  background-color: #f5f5f5;
}
`;
document.head.appendChild(style);
